// 开发环境配置
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./webpack.common.config.js');


const devConfig = {
    devtool: 'inline-source-map',// 让浏览器报错可以具体定位到准确行
	 /*入口*/
    entry: {
        app: [
			'babel-polyfill',//提升babel的翻译能力 更全面的翻译新版的js
            'react-hot-loader/patch',
            path.join(__dirname, 'src/index.js')
        ]
    },
	// 开发环境打包输出到内存 就不需要指定路径了
	// 这里用了随机数 保证每次打包出来的文件名都不同
    output: {
        /*这里本来应该是[chunkhash]的，但是由于[chunkhash]和react-hot-loader不兼容。只能妥协*/
        filename: '[name].[hash].js'
    },
    module: {
        rules: [{
            test: /\.css$/,// 引入style预处理器
            use: ["style-loader", "css-loader?modules&localIdentName=[local]-[hash:base64:5]", "postcss-loader"] // postcss-loader 自动添加浏览器前缀
        }]
    },
    // 本地服务配置
	devServer: {
		contentBase: path.join(__dirname, './dist'), // URL的根目录。如果不设定的话，默认指向项目根目录
		port: 7411,
		historyApiFallback: true, // 任意的404响应都被替代为index.html。
		// 如果你希望服务器外部可以访问，指定如下：host: "0.0.0.0"。比如你用手机通过IP访问。
		// 手机和电脑要在同一个网段 比如共享网络 同一个wifi
		host: '0.0.0.0' ,
		proxy: {// 把我们的API请求，代理到json-server服务器去。
           "/api/*": "http://localhost:8090/$1"
        }
	},
	// plugins:[
 //        new webpack.DefinePlugin({
 //               MOCK: true // dev环境下启用mock模拟数据
 //        })
 //    ]
};

module.exports = merge({
    customizeArray(a, b, key) {
        /*entry.app不合并，全替换*/
        if (key === 'entry.app') {
            return b;
        }
        return undefined;
    }
})(commonConfig, devConfig);

// module.exports = 
// 
// 	devtool: 'inline-source-map', // 让浏览器报错可以具体定位到准确行
//     /*入口*/
//     entry: {
//         app: [
//             'react-hot-loader/patch',
//             path.join(__dirname, 'src/index.js')
//         ],
//         vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
//     },
//     
//     // 开发环境打包输出到内存 就不需要指定路径了
// 	// 这里用了随机数 保证每次打包出来的文件名都不同
//     output: {
//         //path: path.join(__dirname, './dist'),
// 		/*这里本来应该是[chunkhash]的，但是由于[chunkhash]和react-hot-loader不兼容。只能妥协*/
//         filename: '[name].[hash].js'
//         //chunkFilename: '[name].[chunkhash].js' // 懒加载后每个文件都会对应页面的名字
//     },
// 	
// 	/*src文件夹下面的以.js结尾的文件，要使用babel解析*/
//     /*cacheDirectory是用来缓存编译结果，下次编译加速*/
//     module: {
//         rules: [
// 			{ // 引入style预处理器
// 			   test: /\.css$/,
// 			   use: ['style-loader', 'css-loader']
// 			}
// 		]
//     },
// 	// 本地服务配置
// 	devServer: {
//         contentBase: path.join(__dirname, './dist'), // URL的根目录。如果不设定的话，默认指向项目根目录
// 		port: 7411,
// 		historyApiFallback: true, // 任意的404响应都被替代为index.html。
// 		// 如果你希望服务器外部可以访问，指定如下：host: "0.0.0.0"。比如你用手机通过IP访问。
// 		// 手机和电脑要在同一个网段 比如共享网络 同一个wifi
//         host: '0.0.0.0' 
//     },
// 	resolve: {
//         alias: { // 用自定义的词语代替引入路径前缀
// 			// pages 是我们写的引入地址   path.join(__dirname, 'src/pages')是实际地址？？？
//             pages: path.join(__dirname, 'src/pages'), 
//             components: path.join(__dirname, 'src/components'),
//             router: path.join(__dirname, 'src/router'),
//             actions: path.join(__dirname, 'src/redux/actions'),
//             reducers: path.join(__dirname, 'src/redux/reducers'),
//             mock: path.join(__dirname, 'mock')
//         }
//     },
// 	plugins: [
// 		// 这个插件可以让打包出来的js自动插入到html里，因为每次打包出来的js名字都不一样，手动写死js路径是不行的
// 		new HtmlWebpackPlugin({ 
// 			filename: 'index.html',
// 			template: path.join(__dirname, 'src/index.html')
// 		})
// 	]
// };